---
title: Colors
---


::doc-component-demo
---
title: Brand your application
---
To make your application stand out, Tairo uses `primary`, `info`, `success`, `warning`, `danger` and `muted` custom color shades to allow you to easily customize the look and feel of your dashboard. By default, we use predefined colors from Tailwind CSS but you can easily change them by editing the `tailwind.config.ts` file. 

- **Use the customizer :** Open the Tairo theme customizer by clicking on the droplet icon in the sidebar. You can dynamically change the layout between the two available (more in future updates). You can change the primary color using one of the presets but also the background color, by selecting one of the available shades. The customizer is a useful tool that let's you see your brand color in action.

  :::doc-link-image
  ---
  src: /img/apps/customizer.png
  srcDark: /img/apps/customizer-dark.png
  ---
  :::

---

Useful resources:

- [View default Tailwind CSS colors on tailwindcss.com](https://tailwindcss.com/docs/customizing-colors)
- [Generate shades for your custom colors with tailwindshades.com](https://www.tailwindshades.com/)
- [Generate P-3 shades for your colors with tints.dev](https://www.tints.dev/)


::


::doc-component-demo
---
title: Primary color
demo: '#examples/colors/primary-color.vue'
code: false
dark: false
---
The `primary` color is the main color to establish brand recognition and familiarity of your application.

```ts
import { withShurikenUI } from '@shuriken-ui/tailwind'
import colors from 'tailwindcss/colors'

export default withShurikenUI({
  content: [],
  theme: {
    extend: {
      // change the primary color
      primary: colors.violet,
    }
  }
})
```

---

::


::doc-component-demo
---
title: Muted color
demo: '#examples/colors/muted-color.vue'
code: false
dark: false
---

The `muted` color is used to create a contrast between the primary color, text and the background color. To make your app look good in dark mode, you should use a color that fit well with the primary color: example, if your primary color is red, you should use a warm gray color for the muted color.

```ts
import { withShurikenUI } from '@shuriken-ui/tailwind'
import colors from 'tailwindcss/colors'

export default withShurikenUI({
  content: [],
  theme: {
    extend: {
      // change the muted color
      muted: colors.slate,
    }
  }
})
```

---

::



::doc-component-demo
---
title: Info color
demo: '#examples/colors/info-color.vue'
code: false
dark: false
---
The `info` color is the secondary color used to highlight important information.

```ts
import { withShurikenUI } from '@shuriken-ui/tailwind'
import colors from 'tailwindcss/colors'

export default withShurikenUI({
  content: [],
  theme: {
    extend: {
      // change the muted color
      info: colors.sky,
    }
  }
})
```

---

::

::doc-component-demo
---
title: Success color
demo: '#examples/colors/success-color.vue'
code: false
dark: false
---
The `success` color is the color shade used to highlight actions that have been completed successfully. 

```ts
import { withShurikenUI } from '@shuriken-ui/tailwind'
import colors from 'tailwindcss/colors'

export default withShurikenUI({
  content: [],
  theme: {
    extend: {
      // change the muted color
      success: colors.teal,
    }
  }
})
```

---

::



::doc-component-demo
---
title: Danger color
demo: '#examples/colors/danger-color.vue'
code: false
dark: false
---
The `danger` color is the color shade used to raise attention to potentially dangerous actions or when something has gone wrong.

```ts
import { withShurikenUI } from '@shuriken-ui/tailwind'
import colors from 'tailwindcss/colors'

export default withShurikenUI({
  content: [],
  theme: {
    extend: {
      // change the muted color
      success: colors.rose,
    }
  }
})
```

---

::


::doc-component-demo
---
title: Warning color
demo: '#examples/colors/warning-color.vue'
code: false
dark: false
---
The `warning` color is the color shade used to highlight actions that need to be taken.

```ts
import { withShurikenUI } from '@shuriken-ui/tailwind'
import colors from 'tailwindcss/colors'

export default withShurikenUI({
  content: [],
  theme: {
    extend: {
      // change the muted color
      success: colors.amber,
    }
  }
})
```

---

::


::doc-nav
---
prev: /documentation/tailwindcss
next: /documentation/tailwindcss/fonts
---
::